<template>
    <!-- 二维码登入 -->
    <div class="code">
        <h1>微信扫码登入</h1>
        <i class="iconfont icon-diannaojiaobiao"></i>
        <div class="codePicture">
            <div class="codeImg" v-loading="true">
                <img width="200px"
                    src="https://img1.baidu.com/it/u=1629184190,3216022764&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    alt="">
            </div>
        </div>
        <div class="codeText">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shouji-iphone12-zhengmian"></use>
            </svg>
            请使用手机微信扫码登入
        </div>
        <!-- <span>
                    二维码失效，请点击刷新二维码
                </span> -->
    </div>
</template>

<style scoped lang="less">
.icon {
    width: 2em;
    height: 1.5em;
}

/deep/ h1 {
    text-align: center;
    color: white;
    margin-bottom: 30px;
}

/deep/ .codePicture {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/deep/ .codeImg {
    width: 200px;
    text-align: center;
}

/deep/ .codeText {

    color: white;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/ .icon-diannaojiaobiao {
    font-size: 60px;
    color: white;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
}


// /deep/ .code{
//     display:flex ;
//     flex-direction: column;
//     justify-content: center;
//     align-items: ;
// }
</style>